<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/artshow-detail.css" />
		<link rel="stylesheet" type="text/css" href="../css/state-icons.css"/>
		<style type="text/css">
			body,
			.mui-content {
				background-color: #FFFFFF;
				margin-bottom: 10px;
			}
			
			header .mui-pull-right {
				display: block;
			}
			
			.mui-table-view-cell {
				padding: 10px 15px;
			}
			
			.mui-table-view-cell:after {
				left: 5%;
			}
			
			.artshow-detail-info-area label {
				width: 30%;
				color: #666666;
				font-size: 14px;
				display: inline-block;
			}
			
			.artshow-detail-info-area span {
				font-size: 14px;
			}
			
			.artshow-detail-info-area .mui-table-view-cell p {
				padding: 0 10%;
				color: #000000;
			}
			
			.signup-area {
				padding: 10px;
			}
			
			.artshow-detail-info-area .artshow-info,
			.signup-area .artshow-info {
				color: #333333;
				border-bottom: 2px solid #FEB406;
				padding: 5px;
				font-size: 16px;
			}
			
			.mui-bar-popover {
				width: 30%;
				text-align: center;
			}
			
			.mui-bar-popover a {
				font-size: 14px;
			}
			
			#complain-info p {
				margin: 0px;
				padding: 0;
				width: 100%;
				word-wrap: break-word;
			}
			
			#complain-info p label {
				width: 35%;
				display: inline-block;
				text-align: center;
			}
			
			#complain-info p span {
				display: inline-block;
				width: 55%;
			}
			
			.artshow-info #signUpNum {
				color: #FEB406;
				margin-left: 5px;
			}
			
			#signUpList.mui-table-view li.mui-table-view-cell {
				height: 100px;
				padding: 10px;
			}
			
			#signUpList.mui-table-view .mui-media-object {
				max-width: 80px;
				height: 80px;
				border-radius: 5px;
			}
			
			.mui-media-body h5 {
				color: #000000;
				font-size: 16px;
			}
			
			.mui-media-body p.artist-info {
				color: #333333;
				font-size: 12px;
			}
			
			p.artist-info .price span {
				color: #FEB406;
			}
			
			p.artist-info .type {
				margin: 0 4px;
			}
			
			.mui-media-body p.mui-ellipsis-2 {
				color: #333333;
				font-size: 12px;
			}
			
			.mui-table-view-cell .mui-slider-right .mui-btn:first-child {
				color: #FEB406;
				border-left: 1px solid #efeff4;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-icon mui-pull-right iconfont" href="#actionList">&#xe613;</a>
			<h1 class="mui-title">我发布的帮办</h1>
		</header>
		<div class="mui-content">
			<div id="actionList" class="mui-popover mui-bar-popover">
				<div class="mui-popover-arrow"></div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" id="stopSignUp">
						<a href="#">停止报名</a>
					</li>
					<li class="mui-table-view-cell" id="share">
						<a href="#">分享</a>
					</li>
				</ul>
			</div>
			<div class="mui-popover pop-up" id="complain-info">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h5 class="min-title">申诉详情</h5>
						<p><label>申诉时间</label><span id="complain-time"></span></p>
						<p><label>申诉内容</label><span id="complain-desc"></span></p>
					</div>
				</div>
			</div>
			<div class="artshow-detail-title">
				<p id="title"></p>
				<p class="artshow-info">
					<span class="auditState"></span>
					<span id="releaseTime"></span>
				</p>
				<p class="artshow-state">
					<span class="sign-up-state"></span>
					<span id="signupNum"></span>人报名
				</p>
			</div>
			<div class="artshow-detail-info-area">
				<p class="artshow-info">基本信息</p>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<label>类别：</label><span id="type"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>城市：</label><span id="city"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>详细地址：</label><span id="address"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>活动时间：</label><span id="performBeginTime"></span> 至 <span id="performEndTime"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>报名时间：</label><span id="beginTime"></span> 至 <span id="endTime"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>活动人数：</label><span id="numberOfApplicants"></span> 人
					</li>
					<li class="mui-table-view-cell">
						<label>性别：</label><span id="gender"></span>
					</li>
					<!--<li class="mui-table-view-cell">
						<label>身材要求：</label><span id="stature"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>语言类型：</label><span id="language"></span>
					</li>-->
					<li class="mui-table-view-cell">
						<label>联系人：</label><span id="contacts"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>联系方式：</label><span id="contactway"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>薪酬：</label><span id="salary"></span>
					</li>
					<li class="mui-table-view-cell">
						<label>活动要求：</label>
						<p id="require"></p>
					</li>
					<li class="mui-table-view-cell">
						<label>报酬说明：</label>
						<p id="salaryDescription"></p>
					</li>
				</ul>
			</div>
			<div class="signup-area">
				<p class="artshow-info">已报名帮办
					<span id="signUpNum"></span>人
				</p>
				<ul id="signUpList" class="mui-table-view">
					<!--<li class="mui-table-view-cell mui-media">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn contact">联系 TA</a>
							<a class="mui-btn mui-btn-yellow complain">申诉 TA</a>
							<a class="mui-btn btn-main action">雇佣 TA</a>
						</div>
						<div class="mui-slider-handle">
							<a href="javascript:;">
								<img class="mui-media-object mui-pull-left" src="../images/shuijiao.jpg">
								<div class="mui-media-body">
									<h5 class="artist-name">金池</h5>
									<p class="artist-info">
										<span class="price">出价：<span>600</span></span>
										<span class="type">类型：歌手</span>
										<span class="p-state3">待支付</span>
									</p>
									<p class='mui-ellipsis-2'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
								</div>
							</a>
						</div>
					</li>-->
				</ul>
			</div>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				Common.openWindow('complaint-artist.html');
				var self = plus.webview.currentWebview();
				var artshowId = self.artshowId;
				var signUpState = 1; // 当前演艺报名状态
				var signUpList = document.getElementById("signUpList");
				var actions = ['雇佣', '结算', '支付','去评价','','','查看评价' ,'查看评价'];
				var lazyLoad = mui(signUpList).imageLazyload({
					placeholder: '../images/holder1.png',
					autoDestroy: false
				});
				mui('.mui-scroll-wrapper').scroll();
				Common.ajax({
					url : baseURL + 'myArtPerf/getDetail/uid/' + artshowId + '.json'
				}, function(data) {
					console.log(JSON.stringify(data));
					if(data.code == 1) {
						$.each(data.result, function(i, o) {
							if(!/^(type|artistList|auditState|signupState|salary)$/.test(i)) {
								if(/Time$/.test(i)) { // 活动时间、报名时间截取
									$("#" + i).text(o.substr(0, 16));
								} else {
									$("#" + i).text(o);
								}
							} else {
								switch(i) {
									case 'type':
										$("#" + i).text(Common.artshowType[Number(o) - 1]);
										break;
									case 'artistList':
										$("#signUpNum").text(o.length);
										signUpList.innerHTML = '';
										if(o.length) {
											for (var i = 0; i < o.length; i++) {
												createArtistList(o[i].stagename, o[i].artistid, o[i].pic, o[i].description,
													o[i].price / 100, o[i].specialty, Number(o[i].state));
											}
											lazyLoad.refresh(true);
										} else {
											Common.showState(signUpList, '', '暂时无人报名', 20);
										}
										break;
									case 'auditState':
										$(".auditState").addClass('audit-state-' + o).text(Common.auditState[o - 1]);
										break;
									case 'signupState':
										signUpState = o;
										$(".sign-up-state").addClass('sign-up-state-' + o).text(Number(o) ? '报名中' : '停止报名');
										break;
									case 'salary':
										$("#salary").text(o / 100);
										break;
									default:
										break;
								}
							}
						});
					} else {
						mui.toast(data.msg);
					}
				}, function(xhr) {
					Common.linkError();
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				// 点击外部自动收起
				mui(document).on('tap', 'html', function() {
					mui.swipeoutClose($("li.mui-selected")[0]);
				})
	
				// 停止报名
				mui('#actionList').on('tap', '#stopSignUp', function() {
					if(signUpState) {
						plus.nativeUI.confirm("确认停止报名？", function(e) {
							if(!e.index) {
								var url = baseURL + 'myArtPerf/closed/' + artshowId + '.json';
								console.log(url);
								Common.ajax({
									url : url
								}, function(data) {
									console.log(JSON.stringify(data));
									if(data.code == 1) {
										mui.toast('操作成功');
										mui('.mui-popover').popover('hide');
										self.reload();
									} else {
										mui.toast('操作失败，请稍后再试');
									}
								}, function(xhr) {
									mui.toast('网络异常，请稍后再试');
									console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
								})
							}
						}, '停止报名', ["确定", "取消"]);
					} else {
						mui.toast('操作失败，帮办已经为不可报名状态');
					}
					
				})
		
				// 侧滑显示 雇佣 操作
				mui('#signUpList').on('tap', '.mui-btn', function() {
					var parent = $(this).parents('li')[0];
					var thisId = parent.id;
					var thisState = parent.state;
					var thisName = $(parent).find('.artist-name').text();
					mui.swipeoutClose(parent);
					if($(this).hasClass('contact')) { // 联系 TA
						Common.openWindow('single-chat.html', {
							releaseId: thisId,
							pic: parent.pic,
							sName: thisName
						});
					} else if($(this).hasClass('complain')) { // 申诉
						Common.openWindow('complaint-artist.html', {
							artistId : thisId,
							artshowId : artshowId
						});
					} else if($(this).hasClass('complain-state')) { // 申诉详情
						console.log('申诉详情');
						var popUp = document.getElementById("complain-info");
						Common.ajax({
							url : baseURL + 'complain/get/' + thisId + '/' + artshowId + '.json'
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								var desc = data.complain.description;
								console.log(data.complain.complaintime.time);
								var time = new Date(data.complain.complaintime.time);
								mui(popUp).popover('show');
								$(popUp).find('span#complain-desc').text(desc);
								$(popUp).find('span#complain-time').text(time.toLocaleString().substr(0, 8));
							} else {
								mui.toast('加载失败，请稍后再试');
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
						
					} else { // 右侧按钮
						if(thisState == 3 || thisState == 6 || thisState == 7) {
							Common.openWindow('evaluate.html', {
								state : thisState,
								artistId : thisId,
								artistName : thisName,
								artshowId : artshowId,
								artshowName : $("#title").text(),
								artshowTime : $("#releaseTime").text()
							})
							mui.swipeoutClose(parent); // 评价
						} else {
							var actionList = ['inOrder', 'inCount', 'inPay'];
							var url = baseURL + 'myArtPerf/' + actionList[thisState] + '/uid/' + artshowId + '/' + thisId + '.json';
							console.log(url);
							plus.nativeUI.confirm("确认" + actions[thisState] + " ？", function(e) {
								if(!e.index) {
									Common.ajax({
										url : url
									}, function(data) {
										if(data.code == 1) {
											self.reload();
											mui.toast('操作成功');
										} else {
											mui.toast('操作失败，' + data.msg);
										}
									}, function(xhr) {
										mui.swipeoutClose(parent);
										mui.toast('网络异常，请稍后再试');
										console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
									})
								} else {
									mui.swipeoutClose(parent);
								}
							}, actions[thisState], ["确定", "取消"]);
						}
					}
				});
				
				document.addEventListener('reload', function() {
					self.reload();
				})
				
				// 点击进入艺人详情
				mui('#signUpList').on('tap', '.mui-table-view-cell', function() {
					Common.openWindow('artist-workroom.html',{artistId : this.id});
				})
				
				/**
				 * @param {Object} name			艺人姓名
				 * @param {Object} id			艺人id
				 * @param {Object} pic			图片扩展名
				 * @param {Object} desc			报名描述
				 * @param {Object} price		报价
				 * @param {Object} specialty	艺人类型
				 * @param {Object} state		成交状态
				 */
				function createArtistList(name, id, pic, desc, price, specialty, state) {
					var item = document.createElement("li");
					item.id = id;
					item.state = state;
					item.pic = pic;
					var headPic = Common.artistPic + id + pic;
					item.className = 'mui-table-view-cell mui-media';
					var str = '<div class="mui-slider-right mui-disabled"><a class="mui-btn contact">联系 TA</a>';
					if(state == 2) { // 结算完成后新加 申诉 选项
						str += '<a class="mui-btn mui-btn-yellow complain">申诉</a>';
					}
					if(state != 4 && state != 5 && state != 8) {
						str += '<a class="mui-btn btn-main action">' + actions[state] + '</a>';
					} else if(state == 5) {
						str += '<a class="mui-btn mui-btn-yellow complain-state">申诉详情</a>';
					}
					str += '</div><div class="mui-slider-handle">';
					str += '<a href="javascript:;"><img class="mui-media-object mui-pull-left" data-lazyload="' + headPic + '">';
					str += '<div class="mui-media-body"><h5 class="artist-name">' + name + '</h5><p class="artist-info">';
					str += '<span class="price">出价：<span>' + price + '</span></span><span class="type">类型：'; 
					str += specialty + '</span><span class="deal-state-' + state + '">' + Common.dealState[state] + '</span></p>';
					str += '<p class="mui-ellipsis-2">' + desc + '</p></div></a></div>';
					item.innerHTML = str;
					signUpList.appendChild(item);
				}
			})
		</script>
	</body>

</html>